<template>
    <!-- The AG Grid component -->
     <el-row style="height: 100vh;" justify='center' align="middle">

          <ag-grid-vue
        :rowData="rowData"
        :columnDefs="colDefs"
        style="height: 500px;width:80%;"
    >
    </ag-grid-vue>

     </el-row>
  
</template>

<script setup>
import { AgGridVue } from "ag-grid-vue3"; // Vue Data Grid Component
import {ref }  from 'vue'
import 'ag-grid-community/styles/ag-theme-quartz.css'

   
    // Row Data: The data to be displayed.
    const rowData = ref([
        { make: "Tesla", model: "Model Y", price: 64950, electric: true },
        { make: "Ford", model: "F-Series", price: 33850, electric: true },
        { make: "Toyota", model: "Corolla", price: 29600, electric: true },
    ]);

    // Column Definitions: Defines the columns to be displayed.
    const colDefs = ref([
        { field: "make",flex:1 },
        { field: "model" ,flex:2},
        { field: "price",editable:true },
        { field: "electric" ,flex:1}
    ]);

 
</script>